<template>
  <view class="tool-wrap">
    <input class="ipt" type="text" v-model="hex" placeholder="#6C8CFF" placeholder-class="ph" />
    <view class="swatch" :style="{ background: hex }" />
    <view class="row">
      <slider :value="r" @change="e=>r=e.detail.value" max="255" />
      <text>R: {{ r }}</text>
    </view>
    <view class="row">
      <slider :value="g" @change="e=>g=e.detail.value" max="255" />
      <text>G: {{ g }}</text>
    </view>
    <view class="row">
      <slider :value="b" @change="e=>b=e.detail.value" max="255" />
      <text>B: {{ b }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ColorPickerLite',
  data() { return { r:108, g:140, b:255 } },
  computed: {
    hex: {
      get() {
        const h = (n) => Number(n).toString(16).padStart(2,'0')
        return `#${h(this.r)}${h(this.g)}${h(this.b)}`
      },
      set(v) {
        const m = /^#?([0-9a-fA-F]{6})$/.exec(v||'')
        if (!m) return
        const val = m[1]
        this.r = parseInt(val.slice(0,2),16)
        this.g = parseInt(val.slice(2,4),16)
        this.b = parseInt(val.slice(4,6),16)
      }
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.swatch { width: 100%; height: 120rpx; border-radius: 16rpx; border: 2rpx solid rgba(255,255,255,.12); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 12rpx; align-items: center; }
.ipt { height: 64rpx; border-radius: 20rpx; padding: 0 20rpx; color: #e9ecff; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ph { color: #a7b0d9; }
</style>


